<template>
<div>
<!--html布局-->
<!--工具类-->
  <Row>
    <i-col span="24" style="text-align: right">
      <Button type="primary" icon="md-search" @click="search()" class="tiy_btn">查询</Button>
      <Button type="primary" icon="ios-copy" v-show="isCountriesChanged" class="tiy_btn" @click="tabAdd" v-if="isEditable">保存修改
      </Button>
    </i-col>
  </Row>
  <hr>

  <Row>
      <div style="width: 100%;text-align: right;font-size: 1rem;margin-bottom: 0.5rem;">
        <Checkbox  v-model="isOnlyOpened">仅展示已经开放的国家和地区</Checkbox>
      </div>
  </Row>


  <!--内容-->
  <div>
    <CheckboxGroup v-model="param.selectedCountryIds"  >
      <!-- 根据每个国家显示宽度计算行数，再拆分每行显示的具体国家 -->
      <Row v-for="n in (Math.ceil(countryList.length / colNumber)) ">
        <i-col :span="colWidth" v-for="item in (n == Math.ceil(countryList.length / colNumber) ? countryList.slice((n - 1) * colNumber) : countryList.slice((n - 1) * colNumber, n * colNumber))"
               v-show="!isOnlyOpened||param.selectedCountryIds.indexOf(item.id)!==-1" :xs="{ span: 20, offset: 2 }" :sm="{span: colWidth, offset: 0}">
          <div :class="['country_div',param.selectedCountryIds.indexOf(item.id)!==-1?'countrySelected':'']" @click="selectCountry(item)" >
            <Checkbox :label="item.id" :value="param.selectedCountryIds.indexOf(item.id)!==-1" v-if="isEditable">
              &nbsp;
            </Checkbox>
            <img :src="yunPath+item.countryImg" />
            <div style="text-align: left">
              <span>{{item.countryCn}}</span>
              <br>
              <span>{{item.countryEn}}</span>
            </div>
          </div>
        </i-col>
      </Row>
    </CheckboxGroup>
  </div>

</div>
</template>
<!--javascript 代码-->
<script>
import ICol from "../../../node_modules/view-design/src/components/grid/col";
import tiyData from "./js/countryList/country_list_data"
import {
  init,
  saveCountry, webList
} from "./js/countryList/country_list_funs"

export default {
  components: {ICol},
  data() {
    return {
      countryList: tiyData.tData.countryList,
      yunPath: this.$store.getters.imgPrefix,
      param:tiyData.tParam,
      isOnlyOpened:false,
      isCountriesChanged:false,
    }
  },
  computed: {
    isEditable(){
      return this.$authority('OTHER-1-101')
    },
    colWidth(){ //国家条目显示宽度
      return this.$store.state.base.isExpanded ? 6: 8;
    },
    colNumber(){ //每行显示国家数目
      return 24 / this.colWidth;
    }
  },
  methods: {
    search() {
      webList(this, tiyData);
    },
    tabAdd(){
      saveCountry(this, tiyData);
    },
    selectCountry(item){
      if(!this.isEditable){
        return ;
      }
        let selectedIndex = this.param.selectedCountryIds.indexOf(item.id);
        this.isCountriesChanged = true;
        if(selectedIndex===-1){
          this.param.selectedCountryIds.push(item.id);
        }else{
          this.param.selectedCountryIds.splice(selectedIndex,1);
        }
    }
  },
  mounted() {
    // init(this, tiyData);
  }
}
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional)  "../css/base";


  .country_div{
    border: solid #f1f1f1 1px;
    height: 3rem;
    margin: 8px;
    padding: 8px;
    display: -webkit-flex; /* Safari */
    display: flex;
    cursor: pointer;
    align-items:center;
    font-size: 0.9em;

    img{
      width: 2rem;
      margin-right: 1rem
    }

  }


  .countrySelected{
    background-color:#EDE7F6
  }

</style>

